/**
 * Created by ren on 11/04/2017.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  Platform,
  Image,
  Dimensions,
  StatusBar,
  TouchableWithoutFeedback
}from 'react-native';
import {
  Container,
  Content,
  Text,
  Input,
  Left,
  Icon,
  Body,
  Right,
  Button,
  Header,
  Title,
  View
} from 'native-base'
import {getSize} from '../../utils/response'
import PageUtil from '../../utils/PageUtil'
import * as api from '../../utils/api'
import * as Netservice from '../../utils/netservice'
import {connect} from 'react-redux'
import * as type from '../../actions'
class NamePage extends Component {
  constructor(props, context) {
    super(props, context);
    this.PageUtil = new PageUtil()
    this.state = {
      nickName: '',
      flag: true
    }
  }

  componentDidMount() {
    const {nickName} =this.props;
    this.setState({
      nickName: nickName
    })
  }

  _onChange(value) {
    if (value) {
      this.setState({
        nickName: value,
        flag: false
      })
    } else {
      this.setState({
        nickName: value,
        flag: true
      })
    }
  }

  modifyBus() {
    const {dispatch} =this.props;
    var id = ''
    storage.load({
      key: 'loginState'
    }).then(ret => {
      id = ret.id
      Netservice.post(api.modifyBus, {
        id: id,
        nickName: this.state.nickName
      }).then(response => {
        dispatch(type.updateNickName(this.state.nickName))
        this.PageUtil.pop()
      })
    }).catch(err => {
      console.log(err)
    })
  }

  render() {
    const {nickName}=this.props;
    return (
      <Container style={{backgroundColor:'#F4F4F4'}}>
        <Header iosBarStyle="light-content" backgroundColor="#16BD42"
                style={{backgroundColor:'#16BD42',height:Platform.OS==='ios'?getSize(64):getSize(50),borderBottomWidth:0,marginBottom:getSize(7)}}>
          <StatusBar
            backgroundColor={'#303135'}
          />
          <Left style={{flex:1}}>
            <Button transparent onPress={this.PageUtil.pop}>
              <Icon name='arrow-back' style={{fontSize:getSize(24),color:'white'}}/>
            </Button>
          </Left>
          <Body style={{alignItems:'center'}}>
          <Title style={{color:'white',fontSize:getSize(19)}}>昵称</Title>
          </Body>
          <Right style={{flex:1}}>
            <Button transparent onPress={()=>this.modifyBus()} disabled={this.state.flag}
                    style={{backgroundColor:'rgba(0,0,0,0)'}}>
              <Text style={{color:this.state.flag?'#C7C7CC':'white',}}>保存</Text>
            </Button>
          </Right>
        </Header>
        <Content>
          <View style={{flex:1,backgroundColor:'white',marginTop:getSize(10)}}>
            <Input placeholder="昵称"
                   value={this.state.nickName}
                   onChangeText={(nickName,flag) => this._onChange(nickName,'nickName')}/>
          </View>
        </Content>
      </Container>
    )
  }
}
function select(store) {
  return {
    nickName: store.routesStore.updateNickName
  }
}
export default connect(select)(NamePage)
